<template>
  <!-- 日榜 周榜 月榜 +日期   -->
  <van-sticky offset-top="2.42rem" z-index="98">
    <div id="popup">
      <div class="bgbox">
        <van-dropdown-menu active-color="#1779ff" v-if="show == 'month'">
          <van-dropdown-item ref="ref" :title="title">
            <van-cell>
              <template>
                <button :class="[active == '日榜' ? 'active' : '']" class="num" @click="list('日榜')">日榜</button>
                <button class="num" :class="[active == '周榜' ? 'active' : '']" @click="list('周榜')">周榜</button>
                <button class="num" :class="[active == '月榜' ? 'active' : '']" @click="list('月榜')">月榜</button>
              </template>
            </van-cell>
          </van-dropdown-item>
        </van-dropdown-menu>
        <!-- 周 -->
        <van-dropdown-menu active-color="#1779ff" v-if="show == 'week'">
          <van-dropdown-item ref="ref" :title="title" @close="emit">
            <van-cell>
              <template>
                <button class="num" :class="[active == '日榜' ? 'active' : '']" @click="list('日榜')">日榜</button>
                <button class="num" :class="[active == '周榜' ? 'active' : '']" @click="list('周榜')">周榜</button>
              </template>
            </van-cell>
          </van-dropdown-item>
        </van-dropdown-menu>
        <van-dropdown-menu class="after" v-if="show == 'day'" :overlay="false">
          <van-dropdown-item title="日榜" />
        </van-dropdown-menu>
        <!-- 时间 -->
        <van-dropdown-menu class="select" active-color="#1779ff">
          <van-dropdown-item v-model="value" :options="formatwdate" @change="emit1()" />
        </van-dropdown-menu>
        <slot></slot>
      </div>
      <!-- <div></div> -->
    </div>
  </van-sticky>
  <!-- </div> -->
</template>

<script>
export default {
  props: ['show','timing'], //timing:小于某个时间，故从到前天开始。
  data() {
    return {
      time: [false, false, false],
      title: '日榜',
      formatwdate: [], //日期
      value: '',
      total: '总量',
      active: '日榜', //判断选中哪个日榜、周、月
      newvalue: [],
      endDate: null,
      dateObj:{}

    };
  },
  mounted() {
    this.getDayList();
    this.emit1();
  },
  methods: {
    //周
    getWeek(n) {
      var myDate = new Date();
      var weekDate = new Date(myDate.getTime() - n * 24 * 3600 * 1000); // 计算开始时间用
      var weekDate2 = new Date(myDate.getTime() - n * 24 * 3600 * 1000); // 计算结束时间用
      var day = weekDate.getDay();
      var time = weekDate.getDate() - day + (day === 0 ? -6 : 1);
      var startDate = new Date(weekDate.setDate(time));
      var startYear = startDate.getFullYear();
      //  测试开始 月份日期是否大于10?  //
      var beginm = startDate.getMonth() + 1;
      var begind = startDate.getDate();
      if (beginm < 10) {
        beginm = '0' + beginm;
      }
      if (begind < 10) {
        begind = '0' + begind;
      }
      //  页面渲染 03月11  //
      var beginTime = beginm + '月' + begind + '日';
      //  测试结束 月份日期是否大于10?  //
      var endDate = new Date(weekDate2.setDate(time + 6));
      var endYear = endDate.getFullYear();
      var endm = endDate.getMonth() + 1;
      var endd = endDate.getDate();
      if (endm < 10) {
        endm = '0' + endm;
      }
      if (endd < 10) {
        endd = '0' + endd;
      }
      var endTime = endm + '月' + endd + '日';
      let dateStartVal = startYear + '-' + beginm + '-' + begind;
      let dateEndVal = endYear + '-' + endm + '-' + endd;
      let dateSection = dateStartVal + '-' + dateEndVal;
      // console.log([beginTime + '-' + endTime,dataVal]);
      return [beginTime + '-' + endTime , dateEndVal , dateStartVal, dateEndVal];
    },
    //上个月最后一天
    // month1() {
    //   var nowdays = new Date();
    //   var year = nowdays.getFullYear();
    //   var month = nowdays.getMonth();
    //   if (month == 0) {
    //     month = 12;
    //     year = year - 1;
    //   }
    //   if (month < 10) {
    //     month = '0' + month;
    //   }

    //   var myDate = new Date(year, month, 0);

    //   // var startDate = year + '-' + month + '-01 00:00:00'; //上个月第一天
    //   var endDate = myDate.getDate(); //上个月最后一天
    //   this.endDate = endDate;
    // },
    //月
    month() {
      for (var i = 1; i < 4; i++) {
        var nowdate = new Date();
        nowdate.setMonth(nowdate.getMonth() - i);
        var y = nowdate.getFullYear();
        var m = nowdate.getMonth() + 1;
        var d = nowdate.getDate();
        var lastDay = new Date(y, m, 0);
        if (m < 10) {
          m = '0' + m;
        }
        if (d < 10) {
          d = '0' + d;
        }
        var newvalue = y + '-' + m + '-' + '01' + '-' + y + '-' + m + '-' + lastDay.getDate();
        let startDate = y + '-' + m + '-' + '01';
        let endDate = y + '-' + m + '-' + lastDay.getDate();
        // this.newvalue.push(newvalue);
        var text = {
          text: y + '年' + m + '月',
          value: y + '-' + m + '-' + lastDay.getDate(),
          startDate: startDate,
          endDate: endDate
        };
        this.formatwdate.push(text);
      }
      this.value = this.formatwdate[0].value;
    },
    //
    getDayStr(day) {
      var today = new Date();
      var targetday_milliseconds = today.getTime() + 1000 * 60 * 60 * 24 * day;
      today.setTime(targetday_milliseconds); //注意，这行是关键代码
      var tYear = today.getFullYear();
      var tMonth = today.getMonth();
      var tDate = today.getDate();
      tMonth = this.doHandleMonth(tMonth + 1);
      tDate = this.doHandleMonth(tDate);
      return [tMonth + '月' + tDate + '日', tYear + '-' + tMonth + '-' + tDate];
    },
    doHandleMonth(month) {
      var m = month;
      if (month.toString().length == 1) {
        m = '0' + month;
      }
      return m;
    },
    //日
    getDayList() {
      var nowdate = new Date();
      var y = nowdate.getFullYear();
      var m = nowdate.getMonth() + 1;
      if (m < 10) {
        m = '0' + m;
      }
      var dd;
      let h = nowdate.getHours();
      let count = 1;
      for (var i = 1; i < 8; i++) { //近七天的日期push到数组
        count = i;
        if(this.timing && h < this.timing){  //小店排行0点 - 8点之间没数据，所以展示前天的数据
          count++;
        }
        dd = this.getDayStr(-count)[0];
        var text = {
          text: dd,
          value: this.getDayStr(-count)[1],
          value1: this.getDayStr(-count)[1],
        };
        this.formatwdate.push(text);
      }
      // console.log(this.formatwdate);
      this.value = this.formatwdate[0].value;
    },
    //点击周榜切换
    list(i) {
      this.active = i;
      this.title = i;
      this.$refs.ref.toggle(); //关闭弹窗
      if (i == '日榜') {
        this.formatwdate = [];
        this.getDayList();
        this.dateObj = {value1:this.value,value2:this.value};
      } else if (i == '周榜') {
        this.formatwdate = [];
        var weekData7 = this.getWeek(7); //上周
        this.value = weekData7[1];
        this.dateObj = {value1:this.value,value2:this.value};
        this.dateObj = this.value
        var text = { text: weekData7[0], value: weekData7[1], startDate: weekData7[2], endDate: weekData7[3]};
        this.formatwdate.push(text);
        var weekData14 = this.getWeek(14); //上上周
        var text1 = { text: weekData14[0], value: weekData14[1], startDate: weekData14[2], endDate: weekData14[3]};
        this.formatwdate.push(text1);
        var weekData21 = this.getWeek(21); //上上上周
        var text2 = { text: weekData21[0], value: weekData21[1], startDate: weekData21[2], endDate: weekData21[3]};
        this.formatwdate.push(text2);
        // console.log(this.formatwdate);
      } else if (i == '月榜') {
        this.formatwdate = [];
        this.month();
      }
      this.emit();
    },
    //数据传给父组件
    emit() {
      // this.$emit('formatwdate', this.title, this.value);
      this.formatwdate.forEach((item)=>{
        if(this.value == item.value){
          this.dateObj = item;
        }
      });
      this.$emit('formatwdate',this.title, this.dateObj);
    },
    emit1(i) {
      // let time1 = this.newvalue.filter(item => {
      //   return item.substring(0, 9) == this.value ? item : '';
      // });
      this.formatwdate.forEach((item)=>{
        if(this.value == item.value){
          this.dateObj = item;
        }
      });
      this.$emit('formatwdate1', this.dateObj);
    }
  },
  components: {}
};
</script>

<style scoped lang="less">
.active {
  background: #fd7f2c !important;
  color: #fff !important;
}
#popup {
  width: 100%;
  height: 1.0667rem;
  // border-top: 1px solid #e5e5e5;
  // background: #f1f1f1;
  > .bgbox {
    width: 100%;
    height: 1.0667rem;
    display: flex;
    align-items: center;
    background: #fff;
    justify-content: space-around;
  }
  .num {
    // padding: .266667rem .386667rem;
    padding-left: 0.4rem;
    padding-right: 0.4rem;
    margin-right: 0.266667rem;
    margin-bottom: 0.266667rem !important;
    border-radius: 0.133333rem;
    border: solid 1px #e5e5e5;
    background: #f1f1f1;
    color: #666666;
    line-height: 0.853333rem;
  }
  .num:hover {
    color: #fff;
    background: #fd7f2c;
  }
  .select1 {
    font-size: 0.373333rem;
    color: #fff !important;
    background-color: #fd7f2c !important;
    border: 1px solid #fd7f2c;
  }
  .select {
    flex: 2.3;
    width: 13.333333rem;
  }
}
</style>
